<template id="tmp-item-class-show">
    <span v-if="item">
        @{{ item|itemClass(itemClass) }}
    </span>
</template>
<script>
    Vue.component("component-item-class-show", {
        template:"#tmp-item-class-show",
        props:["item"],
        data() {
            return {
                itemClass:itemClass,
            };
        },
        filters:{
            itemClass(item,itemClass){
                let res='';
                itemClass.forEach(e=>{
                    if(parseInt(e.value) === item.class){
                        res=e.label;
                        e.children.forEach(ce=>{
                            if(ce.value===(item.class+'_'+item.subclass)){
                                res+=' / '+ce.label;
                            }
                        });
                    }
                });
                return res;
            }
        },
    });
</script>
<style>
    .badge{
        /*padding: 0.4em 0.9em;*/
        font-size: 100%;
    }
    .badge-quality0{
        color: rgb(157,157,157);
        background-color: rgb(8,13,34);
    }
    .badge-quality1{
        color: rgb(157,157,157);
        background-color: rgb(8,13,34);
    }
    .badge-quality2{
        color: rgb(24,244,9);
        background-color: rgb(8,13,34);
    }
    .badge-quality3{
        color: rgb(2,101,215);
        background-color: rgb(8,13,34);
    }
    .badge-quality4{
        color: rgb(163,53,238);
        background-color: rgb(8,13,34);
    }
    .badge-quality5{
        color: rgb(255,128,0);
        background-color: rgb(8,13,34);
    }
    .badge-quality6{
        color: rgb(222,195,122);
        background-color: rgb(8,13,34);
    }
</style>
